<template>
  <div class="addArticle">
    <el-form ref="article" :model="article" label-width="80px">
      <el-form-item label="文章标题">
        <el-input v-model=" article.title"></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input
          class="inline-input"
          v-model="article.author"
          placeholder="请输入作者"
          style="width:215px"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="栏目">
      <div class="block">
      <el-cascader
      disabled="true"
      ref="menuref"
    v-model="this.$route.params.author"
    :options="options"
    :props="props"
    @change="handleChange"
    ></el-cascader>
    </div>
    </el-form-item> -->
      <!-- <el-form-item label="是否置顶">
        <el-switch v-model="article.top"></el-switch>
      </el-form-item> -->
    </el-form>
    <Markdown :onchange="change" v-bind:initData="article.content" v-model="article.content"></Markdown>
    <el-row type="flex" class="row-bg" justify="end">
      <el-button class="subBtn" type="primary" @click="submitArticle">提交修改</el-button>
    </el-row>
  </div>
</template>

<script>
import Markdown from "../../components/markdown/markdown-editor"
import initData from "../../markData.js"
export default {
  name: "addArticle",
  data () {
    return {
      article: {
        title: this.$route.params.title,
        author: this.$route.params.author,
        // tag: "",
        // top: false,
        // menuid: [],
        content: this.$route.params.content
      },
      aa: [],
      initData: initData,
      restaurants: [],
      props: {label: "Name", value: "Id", children: "Childrens"},
      options: []
    }
  },
  components: {Markdown},
  methods: {
    toType (obj) {
      return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
    },
    filterNull (o) {
      for (var key in o) {
        if (o[key] === null) {
          delete o[key]
        }
        if (this.toType(o[key]) === "string") {
          o[key] = o[key].trim()
          if (o[key].length === 0) {
            delete o[key]
          }
        } else if (this.toType(o[key]) === "object") {
          o[key] = this.filterNull(o[key])
        } else if (this.toType(o[key]) === "array") {
          o[key] = this.filterNull(o[key])
          if (o[key].length === 0) {
            delete o[key]
          }
        }
      }
      return o
    },
    gettreemenu () {
      this.$request.gettreejson().then(res => {
        this.options = res.data
        // 过滤参数，去掉空值
        this.toType(this.options)
        this.filterNull(this.options)
        console.log(res.data)
      }).catch((err) => {
        console.log(err)
      })
    },
    handleChange (value) {
      // onsole.log(value[value.length - 1])
      this.aa = value[value.length - 1] // 所选菜单的id
      // console.log(this.$refs["menuref"].getCheckedNodes())
      return this.aa
    },
    change () {
      console.log(arguments[0], this.article)
      this.article.content = arguments[0]
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    loadAll () {
      return [
        { "value": "vue" },
        { "value": "node.js" }
      ]
    },
    handleSelect (item) {
      console.log(item)
    },
    submitArticle () {
      // this.$axios.post("http://121.4.176.83:90/api/article/add", {
      //   data: this.article
      // })
      // var aa = this.handleChange(this.value)
      console.log(this.article.content)

      this.$request.fetchGetArticle({
        title: this.article.title,
        content: this.article.content.html,
        markdown: this.article.content.markdown,
        author: this.article.author,
        id: this.$route.params.id})
        .then(res => {
          console.log(res)
          this.$message({
            message: "修改成功",
            type: "success"
          })
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  },
  mounted () {
    this.restaurants = this.loadAll()
    // this.gettreemenu()
    // var btl = this.$refs.menuref.getCheckedNodes()[0].
    //

    console.log(this.article.content)
  }
}
</script>

<style scoped>
.subBtn{
  width: 100px;
  margin: 0 auto;
}
</style>
